<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		/*canvas{
			margin:0 auto;
			border: 1px solid;
		}*/
	div{
	
			width: 500px;
			height: 500px;
			margin: 0 auto;
			border: 1 solid;
			background-color: yellow;
		}
			
	
		</style>
	</head>
	<body>
		<div>
		<canvas id="mycanvas" width="500" height="500"></canvas>
		</div>
		
			<script type="text/javascript">
		   var  canvas=document.getElementById("mycanvas");
		   var ctx=canvas.getContext("2d");
		   var rot=5;
		   //xunhuan
		   setInterval(function(){
		   ctx.fillStyle="#FFFF00"
		   ctx.fillRect(0,0,500,500);
		   ctx.fill();
		   
//		   ctx.beginPath();
//		    ctx.arc(250,250,100,0,Math.PI);
//		    ctx.fillStyle="antiquewhite";
//		    ctx.fill();
//		    
//		    ctx.beginPath();
//		    ctx.arc(250,250,100,0,Math.PI,true);
//		    ctx.fillStyle="black";
//		    ctx.fill();
//		    
//		    ctx.arc(200,250,50,0,Math.PI);
//		    ctx.fillStyle="black";
//		    ctx.fill();
//		    
//		    ctx.beginPath();
//		    ctx.arc(300,250,50,0,Math.PI,true);
//		    ctx.fillStyle="antiquewhite";
//		    ctx.fill();
//		    
//		    ctx.arc(200,250,20,0,Math.PI*2);
//		    ctx.fillStyle="antiquewhite";
//		    ctx.fill();
//		    
//		    ctx.beginPath();
//		    ctx.arc(300,250,20,0,Math.PI*2,true);
//		    ctx.fillStyle="black";
//		    ctx.fill();
		    //45度大圆
		    
		    ctx.beginPath();
		    ctx.arc(250,250,200,rot/180*Math.PI,(1+rot/180)*Math.PI);
		    ctx.fillStyle="black";
		    ctx.fill();
		    
		     ctx.beginPath();
		    ctx.arc(250,250,200,rot/180*Math.PI,(1+rot/180)*Math.PI,true);
		    ctx.fillStyle="white";
		    ctx.fill();
		    //次圆
		    var y=Math.sin(rot/180*Math.PI)*100;
		    var x=Math.cos(rot/180*Math.PI)*100;
		    ctx.beginPath();
		    ctx.arc(250-x,250-y,100,0,2*Math.PI);
		    ctx.fillStyle="black";
		    ctx.fill();
		    
		 
		    ctx.beginPath();
		    ctx.arc(250+x,250+y,100,0,2*Math.PI);
		    ctx.fillStyle="white";
		    ctx.fill();
		    //最小圆
		    ctx.beginPath();
		    ctx.arc(250-x,250-y,50,0,2*Math.PI);
		    ctx.fillStyle="white";
		    ctx.fill();
		  
		     ctx.beginPath();
		    ctx.arc(250+x,250+y,50,0,2*Math.PI);
		    ctx.fillStyle="black";
		    ctx.fill();
		    rot=rot+5;
		    },100);
		    
		</script>
			
	
	</head>
	<body>
		
	</body>
</html>
